<template>
  <div class="ranking-table-container">
    <el-table 
      :data="tableData" 
      style="width: 100%"
      :header-cell-style="{ background: '#f5f7fa' }"
      v-loading="loading"
    >
      <el-table-column prop="rank" label="排名" width="100" align="center" />
      <el-table-column prop="name" label="图书名称" min-width="200" />
      <el-table-column prop="borrowCount" label="借阅次数" width="150" align="center" />
      <el-table-column prop="category" label="分类" width="150" align="center" />
      <el-table-column prop="rating" label="好评率" width="150" align="center" />
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getTop5BorrowedBooks } from '@/api/index.js';
import { ElMessage } from 'element-plus';

const tableData = ref([]);
const loading = ref(false);

const fetchData = async () => {
  loading.value = true;
  try {
    const { data } = await getTop5BorrowedBooks();
    tableData.value = data.map((item, index) => ({
      rank: index + 1,
      name: item.title,
      borrowCount: item.borrow_count,
      category: item.category_name || '未分类',  // 修改这里使用category_name
      rating: (Math.random() * 20 + 80).toFixed(1) + '%'
    }));
  } catch (error) {
    console.error('获取热门图书数据失败:', error);
    ElMessage.error('获取热门图书数据失败');
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  fetchData();
});
</script>

<style scoped>
.ranking-table-container {
  padding: 10px;
}
</style>
